<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ include file="../session.jsp"%>
<!DOCTYPE html>
<html lang="ko">
  <head>
  	<%@ include file="../head.jsp"%>${alert}
  </head>
  <body>
  	<%@ include file="../menu.jsp"%>
	<div class="container">
		<div class="page-header">
			<h2>에디터파우치 등록</h2>
		</div>

		<form id="insertEditerPouch" class="form-horizontal" role="form" method="post" action="listEditerPouch.do" enctype="multipart/form-data">
			<fieldset>
				
				<div class="form-group">
					<label for="editerPouchImg" class="col-md-2 control-label">이미지 <span class="text-danger">(286x340)</span></label>
					<div class="col-md-10">
						<input type="file" class="form-control" name="editerPouchImg"/>
					</div>
				</div>

				<div class="form-group">
					<label for="pouchTitle" class="col-md-2 control-label">파우치명</label>
					<div class="col-md-10">
						<input type="text" class="form-control" name="pouchTitle" placeholder="파우치명을 입력하세요"/>
					</div>
				</div>
				
				<div class="form-group">
					<label for="pouchCategory" class="col-md-2 control-label">파우치 카테고리</label>
					<div class="col-md-10">
						<select name="pouchCategory" class="form-control">
							<option>- 선택하세요 -</option>
							<c:forEach items="${pouchCategory}" var="pouchCategory">
								<option value="${pouchCategory.idPouchCategory}">${pouchCategory.pouchCategoryText}</option>
							</c:forEach>
						</select>
					</div>
				</div>
				
				<div class="form-group">
					<label for="pouchBrand" class="col-md-2 control-label">파우치 브랜드</label>
					<div class="col-md-10">
						<select name="pouchBrand" class="form-control">
							<option>- 선택하세요 -</option>
							<c:forEach items="${brand}" var="brand">
								<option value="${brand.idBrand}">${brand.brandTitle}</option>
							</c:forEach>
						</select>
					</div>
				</div>
				
				<div class="form-group">
					<label for="pouchText" class="col-md-2 control-label">파우치 내용</label>
					<div class="col-md-10">
						<textarea id="pouchText" name="pouchText" class="form-control" rows="10" placeholder="내용을 입력하세요"></textarea>
					</div>
				</div>
				
				<div class="form-group">
					<label for="etc" class="col-md-2 control-label">제품정보</label>
					<div class="col-md-10">
						<div class="table-responsive">
							<table class="table table-condensed">
								<thead>
									<tr class="warning row">
										<th class="text-center col-md-2">번호</th>
										<th class="text-center col-md-5">브랜드명</th>
										<th class="text-center col-md-5">제품명</th>
									</tr>
								</thead>
								<tbody>
									<c:forEach var="i" begin="0" end="9">
										<tr class="text-center row">
											<td class="col-md-2">${i + 1}</td>
											<td class="col-md-5 productLine">
												<select class="form-control" name="brand${i}">
													<option value="default">- 브랜드를 선택하세요 -</option>
													<c:forEach items="${brand}" var="brand">
														<option value="${brand.idBrand}">${brand.brandTitle}</option>
													</c:forEach>
												</select>
											</td>
											<td class="col-md-5 productLine">
												<select class="form-control product" name="product${i}">
													<option value="default">- 브랜드를 먼저 선택하세요 -</option>
												</select>
											</td>
										</tr>
									</c:forEach>
								</tbody>
							</table>
						</div>
					</div>
				</div>

				<div class="form-group">
					<div class="col-md-offset-2 col-md-10">
						<div class="row">
							<div class="col-md-6">
								<button type="submit" class="btn btn-primary btn-block">저장하기</button>
							</div>
							<div class="col-md-6">
								<button type="reset" class="btn btn-warning btn-block">다시작성</button>
							</div>
						</div>
					</div>
				</div>

			</fieldset>
		</form>
	</div>
	<!-- Javascript -->
	<script src="assets/js/jquery.js"></script>
	<script src="assets/js/bootstrap.min.js"></script>
	<script type="text/javascript">
		$(function() {
			
			arr = new Array();
			
			<c:forEach var="i" begin="0" end="9">
				$("select[name='brand${i}']").change(function() {
					
					arr['${i}'] = null;
					
					$("select[name='product${i}']").empty();
					
					var brand = $(this).find("option:selected").val();
					
					$.ajax({
						url: "ajax/brand.jsp",
						data: "brand=" + brand,
						dataType: "xml",
						timeout: 30000,
						cache: false,
						async: false,
						success: function(req) {
							$(req).find("item").each(function() {
								var idProduct = $(this).find("idProduct").text();
								var productTitle = $(this).find("productTitle").text();
								
								var option = $("<option>").html(productTitle);
								option.attr({'value' : idProduct});
								
								$("select[name='product${i}']").append(option);
							});
						},
						error: function(xhr, status, error) {
							alert("status: " + status + " / error-code: " + xhr.status + " " + error);
						}
					});
				});
				
				$("select[name='product${i}']").change(function() {
					
					var product = $(this).find("option:selected").val();
					
					for (var i=0; i<arr.length; i++) {
						if (arr[i] == product && product != 1) {
							alert("동일한 제품을 선택할수 없습니다.");
							$("select[name='product${i}'] option:eq(0)").attr("selected", "selected");
							arr['${i}'] = null;
							return;
						}
					}
					
					if (product == 'default') {
						arr['${i}'] = null;
					} else {
						arr['${i}'] = product;
					}
					
				});
			</c:forEach>
		});
	</script>
	<!-- 형식검사 클래스 참조 -->
	<script src="assets/js/string.js"></script>
	<script type="text/javascript">
		$(function() {
			$("#insertEditerPouch").submit(function() {
				
				if (!$("input[name='pouchTitle']").val().isValue()) {
					alert("파우치명을 입력하세요.");
					$("input[name='pouchTitle']").focus();
					return false;
				}
				
				if ($("select[name='pouchCategory'] > option:selected").index() < 1) {
					alert("파우치 카테고리를 선택하세요.");
					$("select[name='pouchCategory']").focus();
					return false;
				}
				
				var image = true;
				$("input[name='editerPouchImg']").each(function(idx, item) {
					if (!$(item).val().isValue()) {
						image = false;
					}
				});
				
				var check = true;
				if ($("select[name='pouchBrand'] > option:selected").index() < 1) {
					check = false;
				}
				
				if (!image && !check) {
					alert("이미지나 파우치 브랜드를 선택하세요.");
					return false;
				}
				
				if (!$("textarea[name='pouchText']").val().isValue()) {
					alert("내용을 입력하세요.");
					$("textarea[name='pouchText']").focus();
					return false;
				}
				
				var productCount = 0;
				<c:forEach var="i" begin="0" end="9">
					if ($("select[name='product${i}'] > option:selected").index() > 0) {
						productCount++;
					}
				</c:forEach>
				if (productCount == 0) {
					alert("최소한 1개이상의 제품을 선택해 주세요.");
			        return false;
				}
				
				
				if (!confirm("정말 등록하시겠습니까?")) {
					return false;
				}
				
			});
		});
	</script>
  </body>
</html>